<!--
 * @Author: 星孑
 * @Date: 2022-04-09 11:58:33
 * @LastEditors: 星孑
 * @LastEditTime: 2022-04-11 11:20:29
 * @FilePath: /admin/src/views/Error/error502.vue
 * @Description: 权限不存在页面
-->
<template>
  <div class="w-100 h-100 no-data">
    <el-header class="header">
      <headbar />
    </el-header>
    <div>
      <img src="../../assets/image/error502.png" alt="">
      <div class="text text-center">
        {{ text }}
      </div>
      <div class="text-center">
        <span class="back" @click="toFirst">返回首页</span>
      </div>
    </div>
  </div>
</template>
<script>
import Headbar from '../layout/components/Headbar'

export default {
  components: { Headbar },
  props: {
    text: {
      type: String,
      default: '权限不足'
    }
  },
  data() {
    return {
      routes: this.$store.getters.routes
    }
  },
  created() {},
  methods: {
    toFirst() {
      const first = this.routes.find(item => item.name && !item.hidden)
      if (first) {
        this.$router.push({ name: first.name })
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  min-width: 1300px;
  color: #fff;
  background: linear-gradient( #123,  #345);
}
.no-data {
  position: relative;
  min-height: 400px;

  & > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;

    img {
      max-width: 100%;
    }

    .text {
      padding-top: 20px;
      color: #aaa;
      font-size: 36px;
    }
  }

  .back {
    cursor: pointer;
    color: #58f;
    text-decoration: underline;
    font-size: 16px;
  }
}
</style>
